<template>
  <div class="example-container">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item v-for="(item, index) in  breadList" ::key="index" :to="{ path: item.path }">
        {{ item.meta.title }}
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>


<script lang="ts" setup>
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'
interface RouteData {
  [myProps: string]: any
}
const breadList = ref([] as RouteData)

const route = useRoute()

watch(route, () => {
  breadList.value = route.matched
}, {
  immediate: true
})

</script>

<style lang="scss" scoped>
.example-container {
  margin: 25px 0 0 40px;
}
</style>